<template>
  <div class="main-box">
    <login-form :type="status" @change-type="switchType"/>
  </div>
</template>

<script setup lang="ts">
import LoginForm from '@/view/login/components/LoginForm.vue'
import {ref} from 'vue'

let status = ref<'login' | 'register'>('login')

let switchType = (): void => {
  switch (status.value) {
    case 'login':
      status.value = 'register'
      break
    case 'register':
      status.value = 'login'
      break
  }
}
</script>

<style scoped lang="scss">
.main-box {
  width: 100%;
  height: 100%;
  position: relative;

  .form-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>